<template>
  <div class="user-manage">
    <el-row :gutter="20">
      <!-- 左侧机构树 -->
      <el-col :span="6">
        <el-card class="org-tree-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="title">
                <el-icon><House /></el-icon>
                组织机构
              </span>
              <div class="actions">
                <el-tooltip content="展开所有" placement="top">
                  <el-button link @click="expandAll">
                    <el-icon><FullScreen /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="收起所有" placement="top">
                  <el-button link @click="collapseAll">
                    <el-icon><Fold /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                  <el-button link @click="refreshTree">
                    <el-icon><Refresh /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </template>
          
          <div class="tree-search">
            <el-input
              v-model="treeSearchKey"
              placeholder="搜索组织机构"
              clearable
              prefix-icon="Search"
              @input="filterTree"
            />
          </div>
          
          <el-tree
            ref="treeRef"
            :data="orgTreeData"
            :props="{ label: 'name', children: 'children' }"
            :filter-node-method="filterNode"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <span class="label">
                  <el-icon>
                    <component :is="data.children ? 'FolderOpened' : 'House'" />
                  </el-icon>
                  {{ node.label }}
                </span>
                <span class="count">({{ data.userCount || 0 }})</span>
              </div>
            </template>
          </el-tree>
        </el-card>
      </el-col>

      <!-- 右侧用户列表 -->
      <el-col :span="18">
        <!-- 搜索栏 -->
        <el-card class="search-card" shadow="hover">
          <div class="card-header">
            <span class="title">
              <el-icon><Search /></el-icon>
              筛选搜索
            </span>
            <div class="actions">
              <el-button link @click="toggleSearchCollapse">
                {{ isSearchCollapsed ? '展开' : '收起' }}
                <el-icon>
                  <component :is="isSearchCollapsed ? 'ArrowDown' : 'ArrowUp'" />
                </el-icon>
              </el-button>
            </div>
          </div>
          <div class="search-form-wrapper" :class="{ 'is-collapsed': isSearchCollapsed }">
            <el-form :model="searchForm" inline class="search-form">
              <el-form-item>
                <el-space>
                  <el-button type="success" @click="showAdvancedSearch">
                    <el-icon><SetUp /></el-icon>高级查询
                  </el-button>
                  <el-button @click="resetAdvancedSearch">
                    <el-icon><Refresh /></el-icon>重置
                  </el-button>
                </el-space>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

        <!-- 操作栏 -->
        <div class="table-operations">
          <div class="left">
            <el-button type="primary" :icon="Plus" @click="handleAdd">新增用户</el-button>
            <el-button 
              type="danger" 
              :icon="Delete" 
              :disabled="!selectedRows.length"
              @click="handleBatchDelete"
            >
              批量删除
            </el-button>
            <el-button type="success" :icon="Download" @click="handleExport">导出</el-button>
          </div>
          <div class="right">
            <el-space>
              <el-tooltip content="刷新" placement="top">
                <el-button :icon="Refresh" circle @click="refreshTable" />
              </el-tooltip>
              <el-tooltip :content="`${tableSize === 'small' ? '默认' : '紧凑'}视图`" placement="top">
                <el-button :icon="Grid" circle @click="toggleDensity" />
              </el-tooltip>
              <el-tooltip content="列设置" placement="top">
                <el-button :icon="Setting" circle @click="toggleColumnSetting" />
              </el-tooltip>
            </el-space>
          </div>
        </div>

        <!-- 表格卡片 -->
        <el-card shadow="hover" class="table-card">
          <div class="table-wrapper">
            <el-table
              v-loading="loading"
              :data="tableData"
              :size="tableSize"
              border
              highlight-current-row
              :max-height="tableHeight"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="用户信息" min-width="200">
                <template #default="{ row }">
                  <div class="user-info">
                    <el-avatar :size="40" :src="row.avatar" />
                    <div class="user-detail">
                      <div class="username">{{ row.username }}</div>
                      <div class="email">{{ row.email }}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="手机号" prop="phone" width="120" />
              <el-table-column label="角色" width="120">
                <template #default="{ row }">
                  <el-tag size="small" :type="getRoleTagType(row.role)">
                    {{ row.role }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="部门" prop="department" width="120" />
              <el-table-column label="状态" width="80" align="center">
                <template #default="{ row }">
                  <el-switch
                    v-model="row.status"
                    :active-value="1"
                    :inactive-value="0"
                    @change="handleStatusChange(row)"
                  />
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime" width="180" align="center" />
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                  <el-button link type="primary" @click="handleEdit(row)">
                    编辑
                  </el-button>
                  <el-button link type="primary" @click="handleResetPwd(row)">
                    重置密码
                  </el-button>
                  <el-button link type="danger" @click="handleDelete(row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      title="用户详情"
      width="800px"
      class="user-detail-dialog"
    >
      <el-descriptions :column="2" border>
        <template #title>
          <div class="detail-header">
            <el-avatar :size="64" :src="currentUser?.avatar" />
            <div class="user-basic">
              <h3>{{ currentUser?.username }}</h3>
              <p>{{ currentUser?.department }}</p>
            </div>
            <el-tag :type="getRoleTagType(currentUser?.role)" class="role-tag">
              {{ currentUser?.role }}
            </el-tag>
          </div>
        </template>
        
        <el-descriptions-item label="用户ID">
          {{ currentUser?.id }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
          {{ currentUser?.phone }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱">
          {{ currentUser?.email }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="currentUser?.status === 1 ? 'success' : 'danger'">
            {{ currentUser?.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">
          {{ currentUser?.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="最后登录时间" :span="2">
          {{ currentUser?.lastLoginTime }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ currentUser?.remark || '暂无备注' }}
        </el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleEdit(currentUser)">编辑</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增用户表单弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      destroy-on-close
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="formData.role" placeholder="请选择角色">
            <el-option label="管理员" value="admin" />
            <el-option label="普通用户" value="user" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-cascader
            v-model="formData.department"
            :options="departmentOptions"
            placeholder="请选择部门"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="formData.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 高级搜索弹窗 -->
    <el-dialog
      v-model="advancedSearchVisible"
      title="高级查询"
      width="700px"
      class="advanced-search-dialog"
    >
      <el-form :model="advancedSearchForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名">
              <el-input v-model="advancedSearchForm.username" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="advancedSearchForm.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="advancedSearchForm.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="advancedSearchForm.role" placeholder="请选择角色" clearable>
                <el-option label="管理员" value="admin" />
                <el-option label="普通用户" value="user" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-cascader
                v-model="advancedSearchForm.department"
                :options="departmentOptions"
                placeholder="请选择部门"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select v-model="advancedSearchForm.status" placeholder="请选择状态" clearable>
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="advancedSearchForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="advancedSearchVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdvancedSearch">查询</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { 
  Search, Refresh, Plus, Delete, Download, Grid, Setting,
  ArrowDown, ArrowUp, House, FolderOpened, FullScreen, Fold,
  User, Edit, View, SetUp
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, TreeInstance } from 'element-plus'

// 修改表格数据类型定义
interface UserData {
  id: number
  username: string
  avatar: string
  email: string
  phone: string
  role: string
  department: string
  status: number
  createTime: string
  lastLoginTime?: string
  remark?: string
}

// 修改响应式数据的类型
const tableData = ref<UserData[]>([])
const selectedRows = ref<UserData[]>([])

// 修改搜索表单类型
interface SearchForm {
  username: string
  phone: string
  status: string
  dateRange: string[]
}

const searchForm = reactive<SearchForm>({
  username: '',
  phone: '',
  status: '',
  dateRange: []
})

// 修改表单数据类型
interface FormData {
  username: string
  phone: string
  email: string
  role: string
  department: string | string[]
  status: number
}

const formData = reactive<FormData>({
  username: '',
  phone: '',
  email: '',
  role: '',
  department: '',
  status: 1
})

// 表格相关
const loading = ref(false)
const tableSize = ref('default')

// 分页相关
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 弹窗相关
const dialogVisible = ref(false)
const dialogTitle = ref('新增用户')
const formRef = ref<FormInstance>()

// 表单校验规则
const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ]
}

// 部门选项
const departmentOptions = [
  {
    value: 'tech',
    label: '技术部',
    children: [
      { value: 'frontend', label: '前端组' },
      { value: 'backend', label: '后端组' }
    ]
  },
  {
    value: 'product',
    label: '产品部',
    children: [
      { value: 'design', label: '设计组' },
      { value: 'planning', label: '策划组' }
    ]
  }
]

// 添加搜索栏展开/收起状态
const isSearchCollapsed = ref(false)

// 切换搜索栏展开状态
const toggleSearchCollapse = () => {
  isSearchCollapsed.value = !isSearchCollapsed.value
}

// 获取用户列表
const getUserList = async () => {
  loading.value = true
  try {
    // 模拟数据
    setTimeout(() => {
      // 生成模拟数据
      const totalCount = 126 // 总数据条数
      const startIndex = (currentPage.value - 1) * pageSize.value
      const orgUsers = currentOrgId.value ? Array(pageSize.value).fill(null).map((_, index) => ({
        id: startIndex + index + 1,
        username: `${currentOrgId.value}-用户${index + 1}`,
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        email: `user${index + 1}@example.com`,
        phone: '13800138000',
        role: ['admin', 'user'][Math.floor(Math.random() * 2)],
        department: orgTreeData.value[0].children?.find(item => 
          item.id === currentOrgId.value.split('-')[0])?.name || '未知部门',
        status: Math.random() > 0.5 ? 1 : 0,
        createTime: new Date().toLocaleString(),
        lastLoginTime: new Date().toLocaleString(),
        remark: '这是一条测试备注'
      })) : tableData.value

      tableData.value = orgUsers
      total.value = totalCount // 设置总条数
      loading.value = false
    }, 500)
  } catch (error) {
    console.error(error)
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  getUserList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.username = ''
  searchForm.phone = ''
  searchForm.status = ''
  searchForm.dateRange = []
  handleSearch()
}

// 表格选择
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getUserList()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getUserList()
}

// 获取角色标签类型
const getRoleTagType = (role?: string) => {
  if (!role) return 'info'
  const typeMap: Record<string, string> = {
    admin: 'danger',
    user: 'info'
  }
  return typeMap[role] || 'info'
}

// 新增用户
const handleAdd = () => {
  dialogTitle.value = '新增用户'
  dialogVisible.value = true
  formData.username = ''
  formData.phone = ''
  formData.email = ''
  formData.role = ''
  formData.department = ''
  formData.status = 1
}

// 编辑用户
const handleEdit = (row: any) => {
  dialogTitle.value = '编辑用户'
  dialogVisible.value = true
  Object.assign(formData, row)
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('操作成功')
      dialogVisible.value = false
      getUserList()
    }
  })
}

// 重置密码
const handleResetPwd = (row: any) => {
  ElMessageBox.confirm(`确定要重置用户 ${row.username} 的密码吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('密码重置成功')
  })
}

// 删除用户
const handleDelete = (row: any) => {
  ElMessageBox.confirm(`确定要删除用户 ${row.username} 吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    getUserList()
  })
}

// 批量删除
const handleBatchDelete = () => {
  if (!selectedRows.value.length) {
    ElMessage.warning('请选择要删除的用户')
    return
  }
  ElMessageBox.confirm('确定要删除选中的用户吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    getUserList()
  })
}

// 导出
const handleExport = () => {
  ElMessage.success('导出成功')
}

// 刷新表格
const refreshTable = () => {
  getUserList()
}

// 切换表格密度
const toggleDensity = () => {
  const sizes = ['default', 'large', 'small']
  const currentIndex = sizes.indexOf(tableSize.value)
  tableSize.value = sizes[(currentIndex + 1) % sizes.length]
}

// 切换列设置
const toggleColumnSetting = () => {
  // 实现列设置逻辑
}

// 状态变更
const handleStatusChange = (row: any) => {
  const status = row.status === 1 ? '启用' : '禁用'
  ElMessage.success(`已${status}用户 ${row.username}`)
}

// 组织树相关
const treeRef = ref<TreeInstance>()
const treeSearchKey = ref('')
const currentOrgId = ref<string | null>(null)

// 组织树数据
const orgTreeData = ref([
  {
    id: '1',
    name: '总公司',
    userCount: 120,
    children: [
      {
        id: '1-1',
        name: '技术部',
        userCount: 45,
        children: [
          { id: '1-1-1', name: '前端组', userCount: 15 },
          { id: '1-1-2', name: '后端组', userCount: 20 },
          { id: '1-1-3', name: '测试组', userCount: 10 }
        ]
      },
      {
        id: '1-2',
        name: '产品部',
        userCount: 30,
        children: [
          { id: '1-2-1', name: '设计组', userCount: 12 },
          { id: '1-2-2', name: '产品组', userCount: 18 }
        ]
      }
    ]
  }
])

// 用户详情相关
const detailVisible = ref(false)
const currentUser = ref<UserData | null>(null)

// 查看用户详情
const viewUserDetail = (row: UserData) => {
  currentUser.value = row
  detailVisible.value = true
}

// 树节点点击
const handleNodeClick = (data: any) => {
  currentOrgId.value = data.id
  // 根据组织ID获取用户列表
  getUserList()
}

// 修改树的展开/收起方法
const expandAll = () => {
  const tree = treeRef.value
  if (tree) {
    const keys = getAllKeys(orgTreeData.value)
    keys.forEach(key => tree.store.nodesMap[key].expanded = true)
  }
}

const collapseAll = () => {
  const tree = treeRef.value
  if (tree) {
    const keys = getAllKeys(orgTreeData.value)
    keys.forEach(key => tree.store.nodesMap[key].expanded = false)
  }
}

// 获取所有节点的key
const getAllKeys = (data: any[]): string[] => {
  let keys: string[] = []
  data.forEach(item => {
    keys.push(item.id)
    if (item.children && item.children.length) {
      keys = keys.concat(getAllKeys(item.children))
    }
  })
  return keys
}

// 刷新组织树
const refreshTree = () => {
  // 实现刷新逻辑
}

// 过滤树节点
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.name.includes(value)
}

const filterTree = (val: string) => {
  treeRef.value?.filter(val)
}

// 高级搜索相关
const advancedSearchVisible = ref(false)
const advancedSearchForm = reactive({
  username: '',
  phone: '',
  email: '',
  role: '',
  department: '',
  status: '',
  dateRange: []
})

// 显示高级搜索
const showAdvancedSearch = () => {
  advancedSearchVisible.value = true
}

// 处理高级搜索
const handleAdvancedSearch = () => {
  advancedSearchVisible.value = false
  currentPage.value = 1
  getUserList()
}

// 重置高级搜索
const resetAdvancedSearch = () => {
  Object.keys(advancedSearchForm).forEach(key => {
    advancedSearchForm[key] = ''
  })
  resetSearch();
}

// 添加表格高度计算
const tableHeight = ref(500)

// 计算表格高度
const calculateTableHeight = () => {
  // 获取视口高度
  const viewHeight = window.innerHeight
  // 减去其他元素的高度（头部、搜索栏、分页等）
  tableHeight.value = viewHeight - 280
}

// 监听窗口大小变化
window.addEventListener('resize', calculateTableHeight)

onMounted(() => {
  calculateTableHeight()
  getUserList()
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', calculateTableHeight)
})
</script>

<style lang="scss" scoped>
.user-manage {
  .search-card,
  .table-card,
  .org-tree-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  // 添加高级搜索弹窗样式
  .advanced-search-dialog {
    :deep(.el-dialog__body) {
      padding: 20px 30px;
    }
    
    .el-form-item {
      margin-bottom: 18px;
    }
  }

  // 添加表格加载和切换动画
  :deep(.el-table) {
    .el-table__body {
      transition: opacity 0.3s;
    }
    
    &.el-loading-parent--relative {
      .el-table__body {
        opacity: 0.5;
      }
    }
  }

  // 添加分页切换动画
  .pagination-container {
    :deep(.el-pagination) {
      .el-pager li {
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
        }
        
        &.is-active {
          transform: translateY(-2px);
          font-weight: bold;
        }
      }
    }
  }

  .search-card {
    margin-bottom: 20px;
    transition: all 0.3s;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--el-border-color-lighter);
      
      .title {
        font-size: 15px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
        
        .el-icon {
          font-size: 16px;
        }
      }
    }
    
    .search-form-wrapper {
      padding-top: 16px;
      transition: all 0.3s;
      
      &.is-collapsed {
        height: 0;
        padding-top: 0;
        overflow: hidden;
      }
      
      .search-form {
        transition: all 0.3s;
        display: flex;
        justify-content: end;
      }
    }
  }
  
  .table-operations {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .left {
      display: flex;
      gap: 12px;
    }
  }
  
  .table-card {
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    height: calc(100vh - 240px);
    display: flex;
    flex-direction: column;
    
    :deep(.el-card__body) {
      padding: 0;
    }
    
    .table-wrapper {
      flex: 1;
      overflow: hidden;
      
      :deep {
        .el-table {
          border: none;
          
          th.el-table__cell {
            background-color: var(--el-fill-color-light);
            color: var(--el-text-color-regular);
            font-weight: 500;
            height: 48px;
          }
          
          .el-table__row {
            transition: all 0.3s;
            
            td.el-table__cell {
              padding: 12px 0;
            }
            
            &:hover {
              background-color: var(--el-fill-color-lighter) !important;
            }
          }
          
          .el-table__body-wrapper {
            overflow-y: auto;
            
            &::-webkit-scrollbar {
              width: 8px;
              height: 8px;
            }
            
            &::-webkit-scrollbar-thumb {
              background: #ddd;
              border-radius: 4px;
              
              &:hover {
                background: #ccc;
              }
            }
            
            &::-webkit-scrollbar-track {
              background: #f5f5f5;
            }
          }
        }
      }
    }
    
    .pagination-container {
      flex-shrink: 0;
      padding: 16px;
      background: #fff;
      border-top: 1px solid var(--el-border-color-lighter);
    }
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .el-avatar {
      border: 1px solid var(--el-border-color-lighter);
      transition: transform 0.3s;
      
      &:hover {
        transform: scale(1.1);
      }
    }
    
    .user-detail {
      .username {
        font-size: 14px;
        font-weight: 500;
        color: var(--el-text-color-primary);
        margin-bottom: 4px;
      }
      
      .email {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
  
  .org-tree-card {
    height: calc(100vh - 180px);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .title {
        font-size: 15px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
        
        .el-icon {
          font-size: 16px;
        }
      }
      
      .actions {
        display: flex;
        gap: 8px;
      }
    }
    
    .tree-search {
      margin: 12px 0;
    }
    
    :deep(.el-tree) {
      height: calc(100% - 110px);
      overflow-y: auto;
      
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        
        .label {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        .count {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
  
  .user-detail-dialog {
    :deep(.el-dialog__body) {
      padding: 0;
    }
    
    .detail-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px;
      background: var(--el-fill-color-light);
      border-radius: 8px;
      margin-bottom: 20px;
      
      .user-basic {
        flex: 1;
        
        h3 {
          margin: 0 0 8px;
          font-size: 18px;
          font-weight: 500;
        }
        
        p {
          margin: 0;
          color: var(--el-text-color-secondary);
        }
      }
      
      .role-tag {
        align-self: flex-start;
      }
    }
    
    :deep(.el-descriptions) {
      padding: 0 20px;
    }
  }
}

// 优化弹窗样式
:deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
  
  .el-dialog__header {
    margin: 0;
    padding: 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    
    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
  
  .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}
</style> 